<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link rel="stylesheet" href="/css/Order.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <header>
        <div class="header-container">
            <h1>NaiLong Store</h1>
            <label><input type="text" placeholder="请输入商品名称"></label>
            <button>搜索</button>
        </div>
    </header>

    <main>
        <div class="breadcrumb">
            <p>NaiLongStore &gt; 我的订单</p>
        </div>

        <section class="order-summary">
            <h2>商品详情</h2>
            <table class="orderTable">
                <thead>
                    <tr>
                        <th>商品描述</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="orderTableBody">
                    <!-- JS 动态插入 -->
                </tbody>
            </table>
        </section>
    </main>

    <!-- <div class="mouse-follow-icon" id="mouse-follow-icon" style="position:absolute;pointer-events:none;z-index:999;">
        <img src="/images/cursor.gif" alt="跟随鼠标的GIF" />
    </div> -->

    <!-- 申请售后模态框 -->
    <div id="myModal" 
        style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; z-index:9;">
        <div class="modal-content"
            style="background-color:#FFECB3; padding:20px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.3);">
            <h2>请选择一个操作</h2>
            <div class="button-group">
                <button class="action-btn" data-id="1">换货</button>
                <button class="action-btn" data-id="2">退货退款</button>
                <button class="action-btn" data-id="3">仅退款</button>
            </div>
            <button id="closeModal" style="background-color:#FF9800; color:white; margin-top:10px;">关闭</button>
        </div>
    </div>
    
    <!-- 售后处理查看模态框 -->
    <div id="solveModal" 
        style="display: none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; z-index:9;">
        <div class="modal-content"
            style="background-color:#FFE0B2; padding:20px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.3);">
            <h2>售后处理情况</h2>
            <p><strong>商家处理：</strong><span id="businessSolveResult"></span>（<span id="businessSolveTime">-</span>）</p>
            <p><strong>系统处理：</strong><span id="adminSolveResult"></span>（<span id="adminSolveTime">-</span>）</p>
            <button id="closeSolveModal" style="background-color:#FF9800; color:white; margin-top:10px;">关闭</button>
        </div>
    </div>

    <div class="mouse-follow-icon" id="mouse-follow-icon"
        style="display: inline-flex; align-items: center; justify-content: center;">
        <img src="../images/cursor.gif" alt="跟随鼠标的GIF" />
    </div>
    <!-- <script src="/js/index.js"></script>
    <script src="/js/myOrder.js"></script>
    <script src="/js/cursorFollow.js"></script>
    <script src="/js/autoUpdateMyOrder.js"></script> -->
</body>

</html>